<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>checkbox</title>
	<script type="text/javascript" src="/static/jquery-1.11.3.min.js"></script>
	<script>
		function checkChange(srEle) {
            console.log(srEle);
            var checked = $(srEle).prop('checked');
            console.log(checked);

            $('[name="hobby"]').prop('checked',checked);
        }
        
        function checkAll(flag) {
            console.log(flag);
            $('[name="hobby"]').prop('checked',flag);
        }

        function checkUnAll() {
          $('[name="hobby"]').prop('checked',function (i,val) {
              console.log((i, val));
              return !val;
          })
            var total = true;
            $('[name="hobby"]').each(function (i,domEle) {
                total = total && $(domEle).prop('checked');
                console.log(doEle);
            });
            $('#checkAll').prop('checked',total);

        }
	</script>
</head>
<body>
	请选择你的爱好:<br/>
	<input type="checkbox" onchange="checkChange(this)" id="checkAll"/>全选/全不选<br/>
	<div>
		<input type="checkbox" name="hobby"/>JAVA&nbsp;
		<input type="checkbox" name="hobby"/>打篮球&nbsp;
		<input type="checkbox" name="hobby"/>上网&nbsp;
		<input type="checkbox" name="hobby"/>撩妹&nbsp;
	</div>
	
	<div>
		<input type="button" id="btn_checkAll" onclick="checkAll(true)" value="全选"/>
		<input type="button" onclick="checkAll(false)" value="全不选"/>
		<input type="button" onclick="checkUnAll()" value="反选"/>
	</div>
</body>
</html>